<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: flex-end; /* 将内容靠右对齐 */
            height: 100%;
            background: transparent;
        }
        .user-info {
            display: flex;
            align-items: center;
            gap: 15px;
            background: rgba(0, 0, 0, 0.5);
            padding: 5px 15px;
            border-radius: 20px;
            color: #fff;
            white-space: nowrap;
            margin-right: 15px; /* 添加右侧边距 */
        }
        #userDisplay {
            white-space: nowrap; /* 确保用户信息不换行 */
        }
        button {
            padding: 6px 12px;
            background: #dc3545;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            min-width: 80px; /* 增加最小宽度 */
            white-space: nowrap; /* 防止文字换行 */
        }
        button:hover {
            background: #c82333;
        }
    </style>
</head>
<body>
    <div class="user-info">
        <span id="userDisplay">当前用户：加载中...</span>
        <button onclick="logout()">退出登录</button>
    </div>

    <script>
        // 立即执行获取用户信息，不等待DOMContentLoaded
        (function() {
            const username = localStorage.getItem('username') || '未登录';
            document.getElementById('userDisplay').textContent = '' + username;
        })();

        function logout() {
            // 清除登录状态
            localStorage.removeItem('isLoggedIn');
            localStorage.removeItem('username');
            // 跳转到登录页
            window.top.location.href = 'login.html';
        }
    </script>
</body>
</html>